<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.googlecode.objectify.Query" %>
<%@ page import="com.jose.photogallery.domain.Photo" %>

<%
	User user = (User) request.getAttribute("user");
	String menu = (String) request.getAttribute("menu");
	Query<Photo> q = (Query<Photo>) request.getAttribute("query"); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Share-a-Photo!</title>
		<link type="text/css" rel="stylesheet" href="/static/css/reset.css"  media="all" /> 
		<link type="text/css" rel="stylesheet" href="/static/css/main.css" media="all" />
		
		<style type="text/css">
			#container { position:relative; height:30px; }
			#container > * { position:absolute; height:30px; left:0; top:0; }
	
			#loader {display:none;padding-left:20px; background:url(/static/img/crystal-arrows.gif) no-repeat center left;}
		</style>
		
		<!-- gallery page js -->
		<script type="text/javascript" src="/static/js/jquery.min.js"></script>
		<script type="text/javascript" src="/static/js/jquery-ui.custom.min.js"></script>
		
		
		<!-- Star Rating widget -->
		<script type="text/javascript" src="/static/js/jquery.ui.stars.js"></script>
		<link rel="stylesheet" type="text/css" href="/static/css/jquery.ui.stars.css"/>
		
		
	</head>
	<body>
		<!-- header -->
		<div id="header">
			<h1><a href="/">Share-a-Photo</a></h1>
			<div id="user-bar">
				<% if(user == null){ %>
						Welcome, please <a href="<%=request.getAttribute("loginUrl") %>">login</a>
				<% } else { %>
						<span id="login-name"><%= user.getNickname() %></span> <a href="/upload">Upload a photo</a> | <a href="<%=request.getAttribute("logoutUrl") %>">logout</a>
				<% } %>
			</div>
		<!-- /header -->
		</div>
		
		<!-- content-wrap -->
		<div id="content-wrap">
			
			<!-- content -->
			<div id="content">
				
				<div id="photoSearch">
					<form action="/search" method="get">
						<input class="searchBox" type="text" name="q" id="textSearch"/>
						<input id="searchButton" type="submit" value="search" />
					</form>
				</div>
				
				<!-- gallery -->
				<div id="gallery">
					<!-- tn -->
					<ul class="tn">
						<li <% if(menu.equals("top")) {%>
							class="active"
							<% } %>
						><a href="/" >Top</a></li>
						<li <% if(menu.equals("latest")) {%>
							class="active"
							<% } %>
						><a href="/?show=latest">Latest</a></li>
						<% if(user != null){ %>
							<li <% if(menu.equals("mypics")) {%>
								class="active"
								<% } %>
							><a href="/?show=mypics">My Photos</a></li>
						<% } %>
						<li <% if(menu.equals("tags")) {%>
							class="active"
							<% } %>
						><a href="/?show=tags">Tags</a></li>
						<li><a href="/">Search</a></li>
					<!-- /tn -->
					</ul>
					
					<div class="clearfix"></div> 
					
					<div id="gContent">
						<ul class="gPhotos">
							<% int i=1;
								for(Photo photo: q){ %>
						        	<li><a href="/photo?key=<%= photo.getBlobKey() %>"><img src="<%= photo.getImageURLThumb() %>" alt="image" /></a>
						        	<br />
						        	<p><%= photo.getCaption() %></p>
						        	<% if(user != null){ %>
										<p>
											popularity: <span id="avg"><%= photo.getRating() %></span>/<strong>5</strong>
											(<span id="votes"><%= photo.getVotes() %></span> votes cast)
										</p>
									<% } %>
							        </li>
						    <% 		i=i+1;
						    	} %>
						</ul>
					</div>
					
				<!-- /gallery -->	
				</div>
				
			<!-- /content -->
			</div>
			
		<!-- /content-wrap -->
		</div>
		
		<!-- footer -->
		<div id="footer">
			<p>Share-a-Photo | Powered by <a href="http://code.google.com/appengine/">Google App Engine</a></p>
		<!-- /footer -->
		</div>
		
	</body>
</html>